<template>
	<view :style="warpCss" class="overflow-hidden">
		<view class="flex justify-between items-center mb-[20rpx]"
			v-if="diyComponent.textImg || diyComponent.subTitle.text">
			<view class="h-[34rpx] flex items-center" v-if="diyComponent.textImg"
				@click="diyStore.toRedirect(diyComponent.textLink)">
				<image class="h-[100%] w-[auto]" :src="img(diyComponent.textImg)" mode="heightFix" />
			</view>
			<view class="flex items-center ml-[auto]" v-if="diyComponent.subTitle.text"
				@click="diyStore.toRedirect(diyComponent.subTitle.link)" :style="{ 'color': diyComponent.subTitle.textColor }">
				<text class="text-[24rpx]">{{ diyComponent.subTitle.text }}</text>
				<text class="text-[22rpx] iconfont iconxiangyoujiantou"></text>
			</view>
		</view>
		<diy-groupon-list class="many-goods-list-body" :value="diyComponent"></diy-groupon-list>
	</view>
</template>

<script setup lang="ts">
// 拼团活动
import { ref, reactive, computed, watch, onMounted } from 'vue';
import { redirect, img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import { useGoods } from '@/addon/shop/hooks/useGoods'
import diyGrouponList from '@/addon/shop/components/diy/groupon-list/index.vue';

const diyGoods = useGoods();
const props = defineProps(['component', 'index', 'pullDownRefreshCount', 'value']);
const diyStore = useDiyStore();

const goodsList = ref<Array<any>>([]);

const diyComponent = computed(() => {


	if (props.value) {
		return props.value;
	} else if (diyStore.mode == 'decorate') {
		return diyStore.value[props.index];
	} else {

		return props.component;
	}
})

// 轮播指示器
let isShowDots = ref(true)
// #ifdef H5
isShowDots.value = true;
// #endif

// #ifdef MP-WEIXIN
isShowDots.value = false;
// #endif

const warpCss = computed(() => {
	var style = '';
	style += 'position:relative;';
	if (diyComponent.value.componentStartBgColor) {
		if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
		else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
	}

	if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	return style;
})






watch(
	() => props.pullDownRefreshCount,
	(newValue, oldValue) => {
		// 处理下拉刷新业务
	}
)



onMounted(() => {
	refresh();
	// 装修模式下刷新
	if (diyStore.mode != 'decorate') {
		watch(
			() => diyComponent.value,
			(newValue, oldValue) => {
				console.log('刷新')
				refresh();
			},
			{ deep: true }
		)
	}
});

const refresh = () => {
	// 装修模式下设置默认图
	if (diyStore.mode == 'decorate') {
		console.log(diyComponent.value.source)
		// let obj = {
		// 	picUrl: "",
		// 	titleName: "商品名称",
		// 	sale_num: "100",
		// 	unit: "件",
		// 	goodsSku: { price: 100 }
		// };
		// goodsList.value.push(obj);

	} else {
	}
}




const toLink = (data: any) => {
	redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.spuId } })
}

const swiperIndex = ref(0);
const swiperChange = e => {
	swiperIndex.value = e.detail.current;
};
</script>

<style lang="scss" scoped>
.swiper.ns-indicator-dots-three :deep(.uni-swiper-dots-horizontal) {
	bottom: 12rpx;
}

.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot) {
	width: 8rpx;
	height: 8rpx;
	border-radius: 8rpx;
	margin-right: 14rpx;
}

.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot):last-of-type {
	margin-right: 0;
}

.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot-active) {
	width: 30rpx;
}

.swiper-dot-box {
	position: absolute;
	bottom: 4rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 80rpx 8rpx;
	box-sizing: border-box;

	.swiper-dot {
		background-color: #b2b2b2;
		width: 10rpx;
		border-radius: 50%;
		height: 10rpx;
		margin: 8rpx;
	}

	&.straightLineStyle2 {
		.swiper-dot {
			width: 8rpx;
			height: 8rpx;
			border-radius: 8rpx;
			margin: 0;
			margin-right: 14rpx;

			&.last-of-type {
				margin-right: 0;
			}

			&.active {
				width: 30rpx;
			}
		}
	}
}
</style>
